<template>
  <div class="history" v-if="list">
    <!-- 搜索条件 -->
    <el-form :inline="true" :model="historySearch" class="demo-form-inline">
      <el-form-item label="巡检时间:">
        <!-- <el-date-picker
          v-model="historySearch.dataTime"
          :picker-options="pickerBeginDateBefore"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker> -->
        <el-date-picker
          v-model="historySearch.dataTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerBeginDateBefore"
          value-format="yyyy-MM-dd"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      max-height="300"
      highlight-current-row
      stripe
      border
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" min-width="50"></el-table-column>
      <el-table-column prop="name" label="录像状况" min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span :class="[scope.row.status === 0 ? 'f_039D12' : scope.row.status === 1 ? 'f_F56C6C' : 'f_333333']">{{
            scope.row.status === 0 ? '正常' : scope.row.status === 1 ? '异常' : '录像文件丢失'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ip" label="检测结果" min-width="290">
        <template slot-scope="scope">
          <ul class="jcjg" v-show="scope.row.datesign !== '' && scope.row.jcjgList.length > 0">
            <li
              :key="index"
              class="jcjgItem"
              v-for="(item, index) in scope.row.jcjgList"
              :index="index"
              :style="{
                width: item.width,
                left: item.left,
              }"
            ></li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column prop="zclxmc" label="未录像时长" min-width="120">
        <template slot-scope="scope">
          <span class="f_F56C6C">{{ scope.row.differ | dateFormat3 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="wtscsj" label="录像日期" sortable min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.dateSign }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="wtscsj" label="巡检时间" sortable min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.createDate.time | dateFormat }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row class="page-row">
      <el-col :span="12"></el-col>
      <el-col :span="12" style="height: 47px; display: table">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalCount"
        ></el-pagination>
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total,prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>-->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { jsonstrF, fun_date } from '@/assets/js/videoTab.js'
export default {
  props: ['dataList'],
  data() {
    return {
      historySearch: { dataTime: '' },
      tableData: [],
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      list: {},
      loading: false,
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
    }
  },
  watch: {
    dataList: {
      deep: true,
      handler(newVal, oldVal) {
        this.list = newVal
      },
    },
  },
  created() {
    this.list = this.dataList
  },
  mounted() {
    this.historyChild()
  },
  methods: {
    onSubmit() {
      if (this.historySearch.dataTime === '') {
        this.$message.error('请输入巡检时间')
        return
      }
      this.currentPage = 1
      this.pageSize = 10
      this.getHistoryDate(this.currentPage, this.pageSize)
    },
    // 选择每页显示多少条数据
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getHistoryDate(this.currentPage, val)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getHistoryDate(val, this.pageSize)
    },
    // 录像巡检历史
    historyChild(type) {
      this.$on('childMethod', (res) => {
        this.currentPage = res.currentPage
        this.pageSize = res.pageSize
        this.historySearch.dataTime = ''
        this.getHistoryDate(res.currentPage, res.pageSize)
      })
    },
    async getHistoryDate(page, size) {
      this.loading = true
      const params = new URLSearchParams()
      let startDate
      let endDate
      const time = fun_date(-5)
      if (this.historySearch.dataTime === '') {
        startDate = time.otherTime
        endDate = time.currentTime
        // this.historySearch.dataTime = ''
        this.historySearch.dataTime = [time.otherTime, time.currentTime]
      } else {
        startDate = this.historySearch.dataTime[0]
        endDate = this.historySearch.dataTime[1]
      }
      params.append('ip', this.list.zcip)
      params.append('page', page) // 页数
      params.append('size', size) // 条数
      params.append('startDate', startDate)
      params.append('endDate', endDate)
      const { data: res } = await this.$http.post('device/replay/findHistory', params)
      if (res.code !== '0000') {
        this.loading = false
        this.totalCount = 0
        this.tableData = []
        return
      }
      res.data.forEach((item, index) => {
        item.jcjgList = []
      })
      this.totalCount = res.totalCount
      this.tableData = res.data
      jsonstrF(this, res.data, 288, 0)
      this.loading = false
    },
  },
}
</script>
<style lang="scss" scoped>
$c039D12: #039d12;
$cF56C6C: #f56c6c;
$_333333: #333;
@import '@/assets/scss/xjzxCommon.scss';
div.history {
  border-left: 0;
  margin-left: 0;
  padding: 15px 0 15px;
}
.f_039D12 {
  color: $c039D12;
}
.f_F56C6C {
  color: $cF56C6C;
}
.f_333333 {
  color: $_333333;
}
</style>
